<template>
  <view class="content">
    <view style="position: absolute;top: 90rpx;left: 10rpx;" @click="leftClick">
      <u-icon name="arrow-leftward" size="23"></u-icon>
    </view>
    <view class="input">
      <view class="input-tab">
        <view class="input-tab-item" @click="onnav(0)">
          <text :class="{'item-text':currentActive===0}">公司用户</text>
        </view>
        <view class="input-tab-item" @click="onnav(1)">
          <text :class="{'item-text':currentActive===1}">個人用戶</text>
        </view>
      </view>
      <view class="item-center" v-show="currentActive===0">
        <view class="message">
          <view class="">
            <view class="zl">
              登錄資料
            </view>
            <view class="dlm">
              <view class="text-top">
                <text style="color:#ED0000 ;">*</text>
                登錄名
              </view>
              <input @blur="sendname" v-model="companyfrom.username" class="input-item" type="text"
                     placeholder="請輸入用戶名">
            </view>
            <view class="dlm">
              <view class="text-top">
                <text style="color:#ED0000 ;">*</text>
                密碼
              </view>
              <view class="pwdflex">

                <input style="border: none" @blur="sendpwd" v-model="companyfrom.password" class="input-item"
                       :type="PwdShow2?'text':'password'"
                       placeholder="請輸入密碼">
                <u-icon :name="PwdShow2?'eye-fill':'eye-off'" size="23" @click="PwdShow2=!PwdShow2"></u-icon>

              </view>
              <view class="dlm">
                <view class="text-top">
                  <text style="color:#ED0000 ;">*</text>
                  密碼確認
                </view>
                <view class="pwdflex">
                  <input style="border: none" v-model="companyfrom.cpwd" class="input-item"
                         :type="PwdShow3?'text':'password'"
                         placeholder="請再次輸入密碼">
                  <u-icon :name="PwdShow3?'eye-fill':'eye-off'" size="23" @click="PwdShow3=!PwdShow3"></u-icon>

                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    電子郵箱
                  </view>
                  <input @blur="sendemail" v-model="companyfrom.email" class="input-item" type="text"
                         placeholder="請輸入電子郵箱">
                </view>
              </view>
              <view class="">
                <view class="zl">
                  公司資料
                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    公司名稱（中）
                  </view>
                  <input v-model="companyfrom.companyname" class="input-item" type="text"
                         placeholder="請輸入公司中文名稱">
                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    公司名稱（英）
                  </view>
                  <input v-model="companyfrom.en_companyname" class="input-item" type="text"
                         placeholder="請輸入公司英文名稱">
                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    聯絡人姓名
                  </view>
                  <input v-model="companyfrom.consignee" class="input-item" type="text"
                         placeholder="請輸入聯絡人姓名">
                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    聯繫電話
                  </view>
                  <input v-model="companyfrom.mobile" class="input-item" type="text" placeholder="請輸入聯繫電話">
                </view>
                <view class="dlm">
                  <view class="text-top">
                    公司傳真
                  </view>
                  <input v-model="companyfrom.fax" class="input-item" type="text" placeholder="請輸入傳真號碼">
                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    公司地址
                  </view>
                  <div>
                    <input v-model="companyfrom.address" class="input-item" type="text"
                           placeholder="請輸入公司地址">
                  </div>

                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    公司類別
                  </view>
                  <view class="uni-list-cell-db">
                    <picker @change="typeChange" :value="typeindex" :range="options.cn_type">
                      <view class="picker">
                        <view class="uni-input">{{ options.cn_type[typeindex]||'請選擇公司類別' }}</view>
                        <u-icon size="20rpx" name="arrow-right"></u-icon>
                      </view>
                    </picker>
                  </view>
                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    所屬市場
                  </view>
                  <view class="uni-list-cell-db">
                    <picker @change="regionsChange" :value="regionsindex" :range="options.cn_regions">
                      <view class="picker">
                        <view class="uni-input">{{ options.cn_regions[regionsindex]||'請選擇所屬市場' }}</view>
                        <u-icon size="20rpx" name="arrow-right"></u-icon>
                      </view>
                    </picker>
                  </view>
                  <!-- 选择市场 -->
                  <!-- <input class="input-item" type="text" placeholder="请选择"> -->
                </view>
                <view class="dlm">
                  <view class="text-top" style="margin-bottom: 10rpx;">
                    營業執照
                  </view>
                  <image v-if="!img" @click="getImg" style="width: 178rpx; height: 178rpx;"
                         src="../../static/images/login_add.png" mode=""></image>
                  <image v-if="img" @click="getImg" style="width: 178rpx; height: 178rpx;" :src="img"></image>

                </view>
                <view class="dlm">
                  <view class="text-top">
                    <text style="color:#ED0000 ;">*</text>
                    驗證碼
                  </view>
                  <!-- 上传营业执照 -->
                  <view class="" style="display: flex;">
                    <input v-model="companyfrom.code" class="input-item" type="text" placeholder="請輸入驗證碼">
                    <!-- <image class="code" src="" mode=""></image> -->
                    <view class="code-img-wrapper" style="border: 1rpx solid #E5E7FA;"
                          @click="updateImageCode">
                      <canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
                    </view>
                  </view>
                </view>
                <view class="radio-group">
                  <label style="display: flex;">
                    <u-checkbox-group>
                      <u-checkbox shape="circle" activeColor="#645AED" :checked="companyfrom.isSure"
                                  @change="checkboxChange_company"></u-checkbox>
                      <text>我已閱讀並同意
                        <text style="color: #7A7DEE;"> 《協議條款》</text>
                      </text>
                    </u-checkbox-group>
                  </label>
                </view>
                <view class="login-btn" @click="companysubmit">
                  提交
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="item-center" v-show="currentActive===1">
        <view class="dlm">
          <view class="text-top">
            <text style="color:#ED0000 ;">*</text>
            登錄名
          </view>
          <input @blur="sendname" v-model="personfrom.username" class="input-item" type="text"
                 placeholder="請輸入用戶名">
        </view>
        <view class="dlm">
          <view class="text-top">
            <text style="color:#ED0000 ;">*</text>
            密碼
          </view>
          <view class="pwdflex">
            <input style="border: none" @blur="sendpwd" v-model="personfrom.password" class="input-item"
                   :type="PwdShow?'text':'password'"
                   placeholder="請輸入密碼">
            <u-icon :name="PwdShow?'eye-fill':'eye-off'" size="23" @click="PwdShow=!PwdShow"></u-icon>
          </view>
        </view>
        <view class="dlm">
          <view class="text-top">
            <text style="color:#ED0000 ;">*</text>
            密碼確認
          </view>
          <view class="pwdflex">
            <input style="border: none" v-model="personfrom.cpwd" class="input-item"
                   :type="PwdShow1?'text':'password'"
                   placeholder="請再次輸入密碼">
            <u-icon :name="PwdShow1?'eye-fill':'eye-off'" size="23" @click="PwdShow1=!PwdShow1"></u-icon>
          </view>
          <view class="dlm">
            <view class="text-top">
              <text style="color:#ED0000 ;">*</text>
              電子郵箱
            </view>
            <input @blur="sendemail" v-model="personfrom.email" class="input-item" type="text"
                   placeholder="請輸入電子郵箱">
          </view>
          <view class="dlm">
            <view class="text-top">
              <text style="color:#ED0000 ;">*</text>
              聯絡人姓名
            </view>
            <input v-model="personfrom.consignee" class="input-item" type="text" placeholder="請輸入聯絡人姓名">
          </view>
          <view class="dlm">
            <view class="text-top">
              <text style="color:#ED0000 ;">*</text>
              聯繫電話
            </view>
            <input v-model="personfrom.mobile" class="input-item" type="text" placeholder="請輸入聯繫電話">
          </view>
          <view class="dlm">
            <view class="text-top">
              <text style="color:#ED0000 ;">*</text>
              地址
            </view>
            <input v-model="personfrom.address" class="input-item" type="text" placeholder="請輸入地址">
          </view>
          <view class="dlm">
            <view class="text-top">
              <text style="color:#ED0000 ;">*</text>
              驗證碼
            </view>
            <!-- 上传营业执照 -->
            <view class="" style="display: flex;justify-content: space-between;">
              <input v-model="personfrom.code" class="input-item" type="text" placeholder="請輸入驗證碼">
              <!-- <image class="code" src="" mode=""></image> -->
              <view class="code-img-wrapper" style="border: 1rpx solid #E5E7FA;" @click="updateImageCode">
                <canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
              </view>
            </view>
          </view>
          <view class="radio-group">
            <label style="display: flex;">
              <u-checkbox-group>
                <u-checkbox shape="circle" activeColor="#645AED" :checked="personfrom.isSure"
                            @change="checkboxChange_person"></u-checkbox>
                <text>我已閱讀並同意
                  <text style="color: #7A7DEE;"> 《協議條款》</text>
                </text>
              </u-checkbox-group>
            </label>
          </view>
          <view class="login-btn" @click="personsubmit">
            提交
          </view>

        </view>

      </view>

    </view>
  </view>
</template>

<script>
import {
  userexist
} from '@/network/api/user.js'
import {
  mapMutations,
  mapActions
} from 'vuex'
import {
  Mcaptcha
} from '@/config/mcaptcha.js'

import {
  pathToBase64
} from '@/js_sdk/mmmm-image-tools/index.js'

export default {
  data() {
    return {
      PwdShow: false,
      PwdShow1: false,
      PwdShow2: false,
      PwdShow3: false,
      img: '',
      options: {
        cn_regions: [
          "香港",
          "澳門"
        ],
        cn_type: [
          "博彩業",
          "工業",
          "服務業",
          "郵電",
          "通信",
          "社區服務",
          "批發",
          "零售業",
          "慈善機構"
        ],
      },
      // 验证码组
      personfrom: {
        username: '',
        password: "",
        cpwd: "",
        email: "",
        consignee: "",
        mobile: "",
        address: "",
        code: "",
        isSure: false
      },
      companyfrom: {
        username: "",
        companyname: "",
        en_companyname: "",
        password: "",
        cpwd: "",
        email: "",
        consignee: "",
        mobile: "",
        fax: "",
        address: "",
        area: "",
        industry: "",
        market: "",
        license: "",
        code: "",
        isSure: false,
      },
      typeindex: null,
      regionsindex: null,
      currentActive: 0,
      agree: false,
      title: 'Hello',
      show: false,
    }
  },
  onLoad() {

  },
  onReady() {
    this.mcaptcha = new Mcaptcha({
      el: 'canvas',
      width: 80,
      height: 35,
      createCodeImg: ""
    });
  },
  methods: {
    sendpwd() {
      if (this.companyfrom.password) {
        if (this.companyfrom.password.length < 8) {
          uni.showToast({
            title: '密码长度为8~32个字符',
            icon: 'none'
          })
          this.companyfrom.password = ''
        }
      }
      if (this.personfrom.password) {
        if (this.personfrom.password.length < 8) {
          uni.showToast({
            title: '密码长度为8~32个字符',
            icon: 'none'
          })
          this.personfrom.password = ''
        }
      }
    },
    sendemail() {
      if (this.companyfrom.email) {
        if (!this.isValidEmail(this.companyfrom.email)) {
          uni.showToast({
            title: '请重新输入正确的电子邮箱',
            icon: 'none'
          })
          this.companyfrom.email = ''
          return
        }
      }
      if (this.personfrom.email) {
        if (!this.isValidEmail(this.personfrom.email)) {
          uni.showToast({
            title: '请重新输入正确的电子邮箱',
            icon: 'none'
          })
          this.personfrom.email = ''
          return
        }
      }
    },
    isValidEmail(email) {
      // 使用正则表达式来匹配电子邮箱的格式
      const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      return emailPattern.test(email);
    },
    async sendname() {
      if (this.companyfrom.username) {
        let data = {
          username: this.companyfrom.username
        }
        const res = await userexist(data)
        if (res.data.code == 1) {
          this.companyfrom.username = ''
          uni.showToast({
            title: res.data.msg + ',请重新输入',
            icon: 'none'
          })
        }
      }
      if (this.personfrom.username) {
        let data = {
          username: this.personfrom.username
        }
        const res = await userexist(data)
        if (res.data.code == 1) {
          this.personfrom.username = ''
          uni.showToast({
            title: res.data.msg + ',请重新输入',
            icon: 'none'
          })
        }
      }
    },
    ...mapActions(["regisperson", 'regiscompany']),
    getImg() {
      uni.chooseImage({
        count: 1,
        // sizeType压缩图片
        sizeType: "compressed",
        success: (res) => {
          this.img = res.tempFilePaths[0]
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: (path) => {
              pathToBase64(path.path).then(base64 => {
                this.companyfrom.license = base64.split(",")[1]
                console.log(this.companyfrom.license);
              })
                  .catch(error => {
                    console.error(error)
                  })
            }
          })
        }
      })
    },
    checkboxChange_person(e) {
      this.personfrom.isSure = e
    },
    checkboxChange_company(e) {
      this.companyfrom.isSure = e
    },
    leftClick() {
      uni.navigateBack({
        delta: 1
      })
    },
    companysubmit() {
      if (this.companyfrom.password !== this.companyfrom.cpwd) {
        return uni.showToast({
          title: '兩次密碼不一致'
        })
      }
      if (!this.companyfrom.code) {
        return uni.showToast({
          title: '請輸入圖形驗證碼'
        })
      }
      let validate = this.mcaptcha.validate(this.companyfrom.code)
      if (!validate) {
        return uni.showToast({
          title: '圖形驗證碼錯誤'
        })
      }
      if (!this.companyfrom.isSure) {
        return uni.showToast({
          title: '請勾選《協議條款》'
        })
      }
      this.companyfrom.industry=this.options.cn_type[this.typeindex]
      this.companyfrom.market=this.options.cn_regions[this.regionsindex]
      this.regiscompany(this.companyfrom)
      console.log(this.companyfrom);
    },
    // 刷新验证码
    updateImageCode() {
      this.mcaptcha.refresh()
    },
    personsubmit() {
      if (this.personfrom.password !== this.personfrom.cpwd) {
        return uni.showToast({
          title: '兩次密碼不一致'
        })
      }
      if (!this.personfrom.code) {
        return uni.showToast({
          title: '請輸入圖形驗證碼'
        })
      }
      let validate = this.mcaptcha.validate(this.personfrom.code)
      if (!validate) {
        return uni.showToast({
          title: '圖形驗證碼錯誤'
        })
      }
      if (!this.personfrom.isSure) {
        return uni.showToast({
          title: '請勾選《協議條款》'
        })
      }
      this.regisperson(this.personfrom)
      console.log(this.personfrom);

    },
    //类别
    typeChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.typeindex = e.detail.value
      this.companyfrom.industry = this.options.cn_type[this.typeindex]
    },
    //市场
    regionsChange(e) {
      this.regionsindex = e.detail.value
      this.companyfrom.market = this.options.cn_regions[this.typeindex]
    },

    onnav(value) {
      this.currentActive = value
      this.mcaptcha.refresh()
    },
  }
}
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  background: url('../../static/images/signin_bg.png') no-repeat;
  background-size: 100vw 100vh;
  position: relative;

  .pwdflex {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #E5E7FA;
  }

  .input {
    position: absolute;
    top: 422rpx;
    left: 50%;
    transform: translate(-50%);
    width: 650rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 20rpx 50rpx rgba(125, 122, 248, 0.3);
    opacity: 1;
    border-radius: 50rpx;

    .input-tab {
      width: 100%;
      height: 90rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #707070;
      display: flex;

      .input-tab-item {
        width: 50%;
        text-align: center;

        .item-text {
          color: #4949C3;
          padding-bottom: 20rpx;
          border-bottom: 6rpx solid #7D7AF8
        }
      }
    }

    .item-center {
      padding: 38rpx;

      .zl {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 43rpx;
        color: #4949C3;
        opacity: 1;
      }

      .dlm {
        padding: 20rpx 0;

        .uni-list-cell-db {

          padding: 15rpx;
          border-bottom: 1rpx solid #E5E7FA;

          .picker {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }

        .text-top {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
        }

        .input-item {
          padding: 15rpx;
          outline: none;
          -webkit-appearance: button;
          -webkit-appearance: none;
          border-radius: 0;
          background: none;
          border: none;
          border-bottom: 1rpx solid #E5E7FA;
        }
      }

      .radio-group {
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #707070;
      }
    }
  }

  .login-btn {
    margin: 33rpx auto;
    width: 600rpx;
    height: 88rpx;
    background: linear-gradient(80deg, #B9B3F7 0%, #6D6BF6 100%);
    box-shadow: 0rpx 15rpx 30rpx rgba(110, 108, 248, 0.3);
    opacity: 1;
    border-radius: 30rpx;
    color: #FFFFFF;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
